<template>
  <div class="goods-quan">
    <div class="item items-center" v-for="(item, index) in couponList" :key="`quan${index}`">
      <div class="quan flex-row">
        <span class="text">优惠券</span>
        <span class="value">{{item.formValue}}元代金券</span>
      </div>
      <div class="btns" @click="receiveCoupon(item)">{{item.isReceive === 1 ? '已领取' : '领券'}}</div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'
  export default {
    props: {
      showGet: { // 是否领券
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: () => []
      }
    },
    watch: {
    },
    data() {
      return {
      }
    },
    computed: {
      ...mapState('goods', {
        storeId: state => state.storeId
      }),
      ...mapGetters('goods', {
        couponList: 'getCouponList'
      })
    },
    methods: {
      receiveCoupon({ id, isReceive }) {
        this.$checkLogin().then(() => {
          if (isReceive === 1) {
            return
          }
          this.$http.request({
            url: '/index/receiveCoupon.json',
            data: {
              couponId: id,
              storeId: this.storeId,
            }
          }).then(() => {
            // this.dataList[index].isReceive = 1
            this.$store.dispatch('goods/getCouponList')
            this.$toast('领取成功', 'success')
          })
        })
      }
    }
  }
</script>
<style lang="scss">
  .goods-quan {
    margin-top: 12px;
    margin-bottom: 8px;
    .item {
      width: 348px;
      height: 28px;
      border-radius: 2px;
      background-color: #DFF2FF;
      .quan {
        margin-left: 8.5px;
        border: 1px solid #0096FF;
        border-radius: 2px;
        font-size: 10px;
        height: 18px;
        .text {
          width: 38px;
          height: 16px;
          line-height: 18px;
          background-color: #0096FF;
          border-radius:  0 2px 2px 0;
          color: #FFFFFF;
          text-align: center;
        }
        .value {
          min-width: 58px;
          height: 18px;
          line-height: 19px;
          padding: 0 3px;
          color: #0096FF;
        }
      }
      .btns {
        width: 46px;
        height: 18px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
        font-size: 12px;
        margin-left: auto;
        margin-right: 7.75px;
        background-color: #0096FF;
        border-radius: 9px;
      }
    }
  }

</style>
